<script setup lang="ts">
const { waterForm } = defineProps<{
  waterForm: Object; // 定义采样时间的类型
}>();
</script>

<template>
  <el-card class="box-card">
    <h1 style="text-align: center">环境空气和废气 颗粒物分析原始记录（B面）</h1>
    <div>SXLPHJ/JL/CX-22-77</div>
    <table class="table">
      <tr>
        <td colspan="4">样品唯一性标识</td>
        <td style="width: 8%" colspan="1" rowspan="2">采样体积 V(m³)</td>
        <td colspan="5">初重B（ ）</td>
        <td colspan="4">终重A（ ）</td>
        <td style="width: 6%" colspan="1" rowspan="2">样品净重m( )</td>
        <td style="width: 6%" colspan="1" rowspan="2">样品浓度C( )</td>
        <td style="width: 6%" colspan="1" rowspan="2">备注</td>
      </tr>
      <tr>
        <td style="width: 8%" colspan="2">样品编号</td>
        <td style="width: 10%" colspan="2">滤膜编号</td>
        <td style="width: 10%" colspan="2">初重1</td>
        <td style="width: 8%" colspan="1">初重2</td>
        <td style="width: 8%" colspan="1">初重3</td>
        <td style="width: 6%" colspan="1">平均值</td>
        <td style="width: 4%" colspan="1">终重1</td>
        <td style="width: 6%" colspan="1">终重2</td>
        <td style="width: 6%" colspan="1">终重3</td>
        <td style="width: 6%" colspan="1">平均值</td>
      </tr>
      <tr v-for="(item, index) in waterForm.bdatas?.b_yparr" :key="index">
        <td style="width: 8%" colspan="2">
          <el-input
            v-model="item.ypbh"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="item.lvbh"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 8%" colspan="1">
          <el-input
            v-model="item.cytj"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="item.cz1"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 8%" colspan="1">
          <el-input
            v-model="item.cz2"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 8%" colspan="1">
          <el-input
            v-model="item.cz3"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 6%" colspan="1">
          <el-input
            v-model="item.pjz1"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 4%" colspan="1">
          <el-input
            v-model="item.zz1"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 6%" colspan="1">
          <el-input
            v-model="item.zz2"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 6%" colspan="1">
          <el-input
            v-model="item.zz3"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 6%" colspan="1">
          <el-input
            v-model="item.pjz2"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 6%" colspan="1">
          <el-input
            v-model="item.ypjz"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 6%" colspan="1">
          <el-input
            v-model="item.ypnd"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 6%" colspan="1">
          <el-input
            v-model="item.notes"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
      </tr>

      <tr>
        <td
          style="width: 10%; font-weight: bold; text-align: center"
          colspan="17"
        >
          标准滤膜检查
        </td>
      </tr>
      <tr>
        <td style="width: 10%" colspan="3">标准滤膜编号</td>
        <td style="width: 10%" colspan="2">原始质量( )</td>
        <td style="width: 10%" colspan="2">称重1( )</td>
        <td style="width: 10%" colspan="2">称重2( )</td>
        <td style="width: 10%" colspan="2">平均值( )</td>
        <td style="width: 10%" colspan="2">与原始质量差值( )</td>
        <td style="width: 10%" colspan="2">允许差值( )</td>
        <td style="width: 10%" colspan="2">是否合格</td>
      </tr>

      <tr v-for="rowIndex in 3" :key="rowIndex">
        <td style="width: 10%" colspan="3">
          <el-input
            v-model="waterForm.bdatas.b_bzlmjc[`bzlmbh_${rowIndex}`]"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="waterForm.bdatas.b_bzlmjc[`yszl_${rowIndex}`]"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="waterForm.bdatas.b_bzlmjc[`cz1_${rowIndex}`]"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="waterForm.bdatas.b_bzlmjc[`cz2_${rowIndex}`]"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="waterForm.bdatas.b_bzlmjc[`pjz_${rowIndex}`]"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="waterForm.bdatas.b_bzlmjc[`yszlcz_${rowIndex}`]"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="waterForm.bdatas.b_bzlmjc[`yxcz_${rowIndex}`]"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
        <td style="width: 10%" colspan="2">
          <el-input
            v-model="waterForm.bdatas.b_bzlmjc[`sfhg_${rowIndex}`]"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
      </tr>
      <tr>
        <td style="width: 10%" colspan="2">备注</td>
        <td colspan="15">
          <el-input
            v-model="waterForm.bdatas.b_notes"
            style="width: 100%; border: 1px solid transparent"
            placeholder="请输入"
          />
        </td>
      </tr>
    </table>
  </el-card>
</template>

<style scoped lang="scss">
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* 表格边框合并 */
  text-align: left;
  /* 默认左对齐 */
  font-size: 14px;
  /* 字体大小 */
  color: #606266;
  /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf;
  /* 表格单元格边框颜色 */
  padding: 12px;
  /* 单元格内边距 */
}

.table th {
  background: #f5f7fa;
  /* 表头背景色 */
  font-weight: 600;
  /* 表头字体加粗 */
  color: #303133;
  /* 表头字体颜色 */
  text-align: center;
  /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
